<template>
  <div class="left_box_Dynamic-child">
    <Input
      v-model="titleval"
      maxlength="20"
      show-word-limit
      :placeholder="isloginInput"
    />
    <form action="">
      <div class="txt_field">
        <textarea class="textarea" @keyup="changeYouFontNum" v-model="comment">
        </textarea>
        <span class="num_textarea">{{ FontNum }}/250</span>
      </div>
    </form>
    <div class="photo_send_box">
      <div class="left_photo_send_box_textraea">
        <!-- <div class="left_photo_send">
          <Icon type="md-happy" class="icon_textraer" size="32" />表情
        </div> -->
        <div class="left_photo_send" @click="showmodal">
          <Icon type="md-photos" class="icon_textraer" size="32" />图片
        </div>
        <!-- <div class="left_photo_send"> -->
        <!-- <Icon type="md-videocam" class="icon_textraer" size="32" />视频 -->
        <!-- </div> -->
      </div>
      <div class="right_photo_send_box_textrae">
        <div class="send_box_textrea" @click="sendComment">发表动态</div>
      </div>
    </div>
    <Modal v-model="pohtoMod" @on-ok="imgOk()">
      <Upload
        action="http://127.0.0.1/four/code_4/tp5/public/index.php/index/commuity/sendImg"
        :before-upload="handleBeforeUpload"
      >
        <Button icon="ios-cloud-upload-outline">上传</Button>
        <div class="imgupload">
          <img :src="imgUrl" alt="" class="imgupload_img" />
        </div>
      </Upload>
    </Modal>
    <div class="show-box-talibox" v-if="loginSuccess()==false">
      <div class="show--font-box-talibox">
        <Icon type="ios-lock" size="30" />
        登录后可发表
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { InDynamic } from "server/commuity.js";
import { sendImg } from "server/commuity.js";
import { getusermessage } from "server/commuity.js";
export default {
  data() {
    return {
      titleval: "",
      file: null,
      pohtoMod: false,
      comment: "",
      FontNum: "0",
      imgUrl: "",
      sendImg: "",
      userData: [],
      nowLogin: false,
      isloginInput:'登录后可发表~'
    };
  },
  methods: {
    imgOk() {
      let Formdate = new FormData();
      let _this = this;
      Formdate.append("image", this.file);
      sendImg(Formdate).then(function(res) {
        _this.$Message[res.err_code]({
          background: true,
          content: res.message,
        });
        if (res.err_code == "success") {
          _this.sendImg = res.data;
        }
      });
    },
    // 发表评论
    sendComment() {
      let _this = this;
      if ((this.comment == "") | (this.titleval == "")) {
        this.$Message["warning"]({
          background: true,
          content: "请填写要发表的标题内容",
        });
      } else {
        this.$show.$on("getUserLoginSuccess", this.loginSuccess);
        if (this.loginSuccess() == true) {
          let token = window.localStorage.getItem("front_token");
          getusermessage(token).then(function(userD) {
            let sednData = {
              nowid: userD.uid,
              Fontcomment: _this.comment,
              imgurl: _this.sendImg,
              title: _this.titleval,
            };
            InDynamic(sednData).then(function(res) {
              if (res.data == "1") {
                _this.$Message["success"]({
                  background: true,
                  content: "发表成功",
                });
                _this.titleval = '';
                _this.comment ='';
                _this.$show.$emit("sendMsgSuccess");
                _this.$emit('changelNum',0);

              }
            });
          });
        } else {
          this.$Message["warning"]({
            background: true,
            content: "未登录请登录！",
          });
        }
      }
    },
    changeYouFontNum() {
      this.FontNum = this.comment.length;
    },
    // 显示添加模态框
    showmodal() {
      this.pohtoMod = true;
    },
    handleBeforeUpload(file) {
      this.file = file;
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        const _base64 = reader.result;
        this.imgUrl = _base64;

      };
      return false;
    },
    loginSuccess() {
      return this.getIsLogin;
    },
  },
  created() {
    let _this = this;
    this.$show.$on("getUserLoginSuccess", this.loginSuccess);
    setTimeout(function() {
      if (_this.loginSuccess == true) {
        let token = window.localStorage.getItem("front_token");
        getusermessage(token).then(function(userD) {
          _this.userData = userD;
          _this.isloginInput = '畅所欲言吧~';
        });
      }
    }, 500);
  },
  computed: {
    ...mapGetters(["getIsLogin", "getUserData"]),
  },
};
</script>

<style scoped>
.txt_field {
  margin-top: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 10px 20px 30px;
  border: 1px solid #dee0e1;
  position: relative;
}
.textarea {
  resize: none;
  height: 48px;
  width: 100%;
  height: 100%;
  outline: 0;
  resize: none;
  border: 0;
  font-size: 16px;
  line-height: 24px;
}
.num_textarea {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  color: #bcbfc3;
  background: #fff;
  font-weight: 400;
  opacity: 1;
}
.photo_send_box {
  width: 100%;
  height: 80px;
  overflow: hidden;
  /* border: 1px solid; */
}
.left_photo_send_box_textraea {
  float: left;
  height: 100%;
}
.left_photo_send {
  float: left;
  width: 82px;
  height: 100%;
  color: #7a8087;
  font-size: 16px;
  line-height: 80px;
  position: relative;
}
.icon_textrear {
  /* font-size: 21px; */
  color: #7a8087;
  padding-right: 5px;
  position: relative;
  top: 2px;
}
.right_photo_send_box_textrae {
  float: right;
  height: 100%;
}
.send_box_textrea {
  text-align: center;
  margin-top: 20px;
  width: 118px;
  height: 38px;
  padding: 0;
  background: #ec4c42;
  border: 1px solid #ec4c42;
  color: #fff;
  line-height: 38px;
}
.imgupload {
  width: 450px;
  height: 300px;
  margin-top: 15px;
}
.imgupload_img {
  width: 100%;
  height: 100%;
}
.left_box_Dynamic-child{
  position: relative;
}
.show-box-talibox {
  width: 100%;
  height: 94px;
  background: #eee;
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 3;
}
.show--font-box-talibox {
  font-size: 20px;
  color: whiite;
  /* color: white; */
  /* line-height: 20; */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>
